<template>
  <div>
    <!-- 图片上传 -->
    <div class="upload_imgBox" v-show="!status">
      <i class="el-icon-picture-outline" style="font-size: 32px"></i>
    </div>
    <div
      class="upload_imgBox"
      v-for="(item, index) of imgdata"
      :key="index"
      v-show="status"
    >
      <img :src="item" alt="" />
    </div>

    <div class="uoload_box">
      <div class="boxs">
        你可以上传JPG 、PNG格式的图片建议尺寸至少为400×256、文件大小不能超过2M
        <button @click="clearimg">清除</button>
        <div>
           <el-upload
            class="upload-demo"
            :action="imgurl"
            :show-file-list="false"
            multiple
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
            ref="upload"
          >
              <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>

          <!-- <form enctype="multipart/form-data" method="post" name="fileinfo">
            
              
            <input type="file" name="file"   />
            <input type="submit" value="Stash the file!" />
          </form> -->
          <!-- <input type="file" @change="onchangemd" />  -->
          <!-- <input type="file" @change="Upload" /> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ButtonCn from "./button-cn.vue";

export default {
  name: "imgUpload",
  data() {
    return {
      filelist: [],
      imgdata: [],
      status: false,
    };
  },
  props: {
    imgurl: String,
    // exportimg:String
  },

  mounted() {},
  watch: {},
  computed() {},

  methods: {
    clearimg() {
      this.$refs.upload.clearFiles();
      this.imgdata = [];
      this.status = false;
    },
    clearFiles(ref) {
      console.log(ref);
    },
    beforeAvatarUpload(file) {
      // console.log(file.type);
      const isJPG = file.type == "image/jpeg" || "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(res,file);
      if (res.code !== "0000") return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.imgdata.push(res.data.url);
      this.status = true;
      // this.exportimg = res.data.url;
      this.$emit("imgsucc", this.imgdata);
      // this.imgdata = []
    },
  },
  components: { ButtonCn },
};
</script>
<style lang="scss" scoped>
.upload_imgBox {
  display: inline-block;
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  width: 200px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  background-color: #eee;

  display: inline-block;
  img {
    width: 100%;
    height: 100%;
  }
}
.uoload_box {
  width: 300px;
  height: 120px;
  // background-color: aqua;
  display: inline-block;
  // margin-top: 100px;
  // margin-left: 50px;
  color: rgb(91, 83, 83);
  position: relative;
  .boxs {
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    width: 319px;
  }
}
.uoload_box:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

::v-deep .upload-demo {
  display: inline-block;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
</style>
